<template>
  <div>
    <el-form-item label-width="0">
      <el-divider class="custom-divider">{{ i18nt('designer.setting.columnSetting') }}</el-divider>
    </el-form-item>
    <el-form-item label-width="0">
<!--      <li v-for="(colItem, colIdx) in selectedWidget.cols" :key="colIdx" class="col-item">
        <span class="col-span-title">{{ i18nt('designer.setting.colSpanTitle') }}{{ colIdx + 1 }}</span>
        <el-input-number v-model.number="colItem.options.span" :min="1" :max="24"
                         @change="(newValue, oldValue) => spanChanged(selectedWidget, colItem, colIdx, newValue, oldValue)"
                         class="cell-span-input"></el-input-number>
        <el-button circle plain size="small" type="danger" @click="deleteCol(selectedWidget, colIdx)"
                   icon="el-icon-minus" class="col-delete-button"></el-button>
        <el-button circle plain size="small" type="warning" @click="insertCol(selectedWidget, colIdx)"
                   icon="el-icon-plus"></el-button>
      </li>-->
      <div>
        <el-button link type="primary" @click="addNewCol(selectedWidget)">{{ i18nt('designer.setting.addColumn') }}
        </el-button>
      </div>
    </el-form-item>
  </div>
</template>

<script>
import i18n from '@/utils/i18n'

export default {
  name: 'gutter-editor',
  mixins: [i18n],
  props: {
    designer: Object,
    selectedWidget: Object,
    optionModel: Object,
  },
  data() {
    return {
      grid: this.designer.formWidget?.getSelectedWidgetRef()?.grid,
    }
  },
  methods: {
    addNewCol(curGrid) {
      const node = {
        x: 0,
        y: 0,
        w: 1,
        h: 1,
      }
      this.grid.addWidget(node)
    },
  },
}
</script>

<style lang="scss" scoped>
li.col-item {
  list-style: none;

  span.col-span-title {
    display: inline-block;
    font-size: 13px;
    width: 120px;
  }

  .cell-span-input {
    width: 90px;
  }

  .col-delete-button {
    margin-left: 6px;
  }
}

</style>
